<template>
  <div class=table-container>
    <div class=pagination>
        <p>当前位置：生产计划管理--计划查询</p>
    <button @click="showContent('content1')">整体计划查看</button>
    <button @click="showContent('content2')">站位计划查看</button>
    <button @click="showContent('content3')">统计信息查看</button>
  </div>
<!-- 整体计划 -->

    <div v-if="activeContent === 'content1'">
              <p>当前位置：生产计划管理--计划查询--整体计划查询--产线生产计划</p>
    <div class="pagination1">
      <input type="text" v-model="searchKeyword" placeholder="输入关键词搜索">
      <button @click="search">搜索</button>
      <button @click="fetchData">加载数据库内容</button>
        <button @click="exportToExcel">导出为Excel</button>

    </div>
    
    <div>
      <br>
    <button @click="showContent('content1')">产线生产计划</button>
    <button @click="showContent('content5')">站位生产计划</button>
    <button @click="showContent('content6')">人员生产计划</button>
    <button @click="showContent('content7')">物料需求表</button>
  </div>
<!--<div> 产线A生产计划<br></div>-->
<div>
    <img :src="src"  :style="{ width: '800px', height: '450px' }">
</div>
   <!-- <div class="table-container">
    <table class="custom-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>直升机编号</th>
          <th>产线</th>
          <th>机型</th>
          <th>批次</th>
          <th>开始装配时间</th>
          <th>指令交付节点</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in currentData" :key="item.field1">
          <td>{{ index+1+(currentPage-1)*itemsPerPage }}</td>
          <td>{{ item.field1 }}</td>
          <td>{{ item.field2 }}</td>
          <td>{{ item.field3 }}</td>
          <td>{{ item.field4 }}</td>
          <td>{{ item.field5 }}</td>
          <td>{{ item.field6 }}</td>
        </tr>
      </tbody>
    </table>
    
    </div>
    -->
<div class="pagination"> <button @click="showContent('content1')">产线A生产计划</button>
    <button @click="showContent('content8')">产线B生产计划</button>
    <button @click="showContent('content9')">产C生产计划</button></div>
<!--
    <div class="pagination">
      <button @click="firstPage">首页</button>
      <button @click="prevPage">上一页</button>
      <span>{{ currentPage }}</span>
      <button @click="nextPage">下一页</button>
      <button @click="lastPage">尾页</button>
    </div>
  -->
    </div>
<!--B-->
<div v-if="activeContent === 'content8'">
              <p>当前位置：生产计划管理--计划查询--整体计划查询--产线生产计划</p>
    <div class="pagination1">
      <input type="text" v-model="searchKeyword" placeholder="输入关键词搜索">
      <button @click="search">搜索</button>
      <button @click="fetchData">加载数据库内容</button>
        <button @click="exportToExcel">导出为Excel</button>

    </div>
    
    <div>
      <br>
    <button @click="showContent('content1')">产线生产计划</button>
    <button @click="showContent('content5')">站位生产计划</button>
    <button @click="showContent('content6')">人员生产计划</button>
    <button @click="showContent('content7')">物料需求表</button>
  </div>
<!--<div> 产线B生产计划</div>-->
<div>
    <img :src="src1" :style="{ width: '800px', height: '450px' }">
</div>
   <!-- <div class="table-container">
    <table class="custom-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>直升机编号</th>
          <th>产线</th>
          <th>机型</th>
          <th>批次</th>
          <th>开始装配时间</th>
          <th>指令交付节点</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in currentData" :key="item.field1">
          <td>{{ index+1+(currentPage-1)*itemsPerPage }}</td>
          <td>{{ item.field1 }}</td>
          <td>{{ item.field2 }}</td>
          <td>{{ item.field3 }}</td>
          <td>{{ item.field4 }}</td>
          <td>{{ item.field5 }}</td>
          <td>{{ item.field6 }}</td>
        </tr>
      </tbody>
    </table>
    
    </div>
    -->
<div class="pagination"> <button @click="showContent('content1')">产线A生产计划</button>
    <button @click="showContent('content8')">产线B生产计划</button>
    <button @click="showContent('content9')">产C生产计划</button></div>
<!--
    <div class="pagination">
      <button @click="firstPage">首页</button>
      <button @click="prevPage">上一页</button>
      <span>{{ currentPage }}</span>
      <button @click="nextPage">下一页</button>
      <button @click="lastPage">尾页</button>
    </div>
  -->
    </div>


    <!--C-->
    <div v-if="activeContent === 'content9'">
              <p>当前位置：生产计划管理--计划查询--整体计划查询--产线生产计划</p>
    <div class="pagination1">
      <input type="text" v-model="searchKeyword" placeholder="输入关键词搜索">
      <button @click="search">搜索</button>
      <button @click="fetchData">加载数据库内容</button>
        <button @click="exportToExcel">导出为Excel</button>

    </div>
    
    <div>
      <br>
    <button @click="showContent('content1')">产线生产计划</button>
    <button @click="showContent('content5')">站位生产计划</button>
    <button @click="showContent('content6')">人员生产计划</button>
    <button @click="showContent('content7')">物料需求表</button>
  </div>
<!--<div> 产线C生产计划</div>-->
<div>
    <img :src="src2" :style="{ width: '800px', height: '450px' }">
</div>
   <!-- <div class="table-container">
    <table class="custom-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>直升机编号</th>
          <th>产线</th>
          <th>机型</th>
          <th>批次</th>
          <th>开始装配时间</th>
          <th>指令交付节点</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in currentData" :key="item.field1">
          <td>{{ index+1+(currentPage-1)*itemsPerPage }}</td>
          <td>{{ item.field1 }}</td>
          <td>{{ item.field2 }}</td>
          <td>{{ item.field3 }}</td>
          <td>{{ item.field4 }}</td>
          <td>{{ item.field5 }}</td>
          <td>{{ item.field6 }}</td>
        </tr>
      </tbody>
    </table>
    
    </div>
    -->
<div class="pagination"> <button @click="showContent('content1')">产线A生产计划</button>
    <button @click="showContent('content8')">产线B生产计划</button>
    <button @click="showContent('content9')">产C生产计划</button></div>
<!--
    <div class="pagination">
      <button @click="firstPage">首页</button>
      <button @click="prevPage">上一页</button>
      <span>{{ currentPage }}</span>
      <button @click="nextPage">下一页</button>
      <button @click="lastPage">尾页</button>
    </div>
  -->
    </div>

    <!--站位生产计划-->
  
    <div v-if="activeContent === 'content5'">
              <p>当前位置：生产计划管理--计划查询--整体计划查询--站位生产计划</p>
    <div class="pagination1">
      <input type="text" v-model="searchKeyword" placeholder="输入关键词搜索">
      <button @click="search">搜索</button>
      <button @click="fetchData">加载数据库内容</button>
        <button @click="exportToExcel">导出为Excel</button>

    </div>
    
    <div>
      <br>
    <button @click="showContent('content1')">产线生产计划</button>
    <button @click="showContent('content5')">站位生产计划</button>
    <button @click="showContent('content6')">人员生产计划</button>
    <button @click="showContent('content7')">物料需求表</button>
  </div>
<!--
    <div class="table-container">
    <table class="custom-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>直升机编号</th>
          <th>产线</th>
          <th>机型</th>
          <th>批次</th>
          <th>开始装配时间</th>
          <th>指令交付节点</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in currentData" :key="item.field1">
          <td>{{ index+1+(currentPage-1)*itemsPerPage }}</td>
          <td>{{ item.field1 }}</td>
          <td>{{ item.field2 }}</td>
          <td>{{ item.field3 }}</td>
          <td>{{ item.field4 }}</td>
          <td>{{ item.field5 }}</td>
          <td>{{ item.field6 }}</td>
        </tr>
      </tbody>
    </table>
    <div>
    <div class="button-container">
      <button class="circle-button" :class="{ active: currentTab === 'tab1' }" @click="currentTab = 'tab1'">
        <span v-if="currentTab !== 'tab1'">Tab 1</span>
        <span v-else>✔</span>
      </button>
      <button class="circle-button" :class="{ active: currentTab === 'tab2' }" @click="currentTab = 'tab2'">
        <span v-if="currentTab !== 'tab2'">Tab 2</span>
        <span v-else>✔</span>
      </button>
    </div>
    
    <div class="content-container">
      <div v-if="currentTab === 'tab1'" class="tab-content">
       
        <h2>Tab 1 Content</h2>
        <p>This is the content of Tab 1.</p>
      </div>
      <div v-if="currentTab === 'tab2'" class="tab-content">
     
        <h2>Tab 2 Content</h2>
        <p>This is the content of Tab 2.</p>
      </div>
    </div>
  </div>
    </div>
  -->

    <div class="center-text">
      <br>
      <button @click="prevPage5">←</button>
      <span>机型：AC20  批次：{{ currentPage5 }}</span>
      <button @click="nextPage5">→</button>
    </div>

    <div>
    <img :src="select" :style="{ width: '800px', height: '450px' }">

    </div>
    </div>


   

<!--人员生产计划-->
<div v-if="activeContent === 'content6'">
              <p>当前位置：生产计划管理--计划查询--整体计划查询--人员生产计划</p>
    <div class="pagination1">
      <input type="text" v-model="searchKeyword" placeholder="输入关键词搜索">
      <button @click="search">搜索</button>
      <button @click="fetchData">加载数据库内容</button>
        <button @click="exportToExcel">导出为Excel</button>

    </div>
    
    <div>
      <br>
    <button @click="showContent('content1')">产线生产计划</button>
    <button @click="showContent('content5')">站位生产计划</button>
    <button @click="showContent('content6')">人员生产计划</button>
    <button @click="showContent('content7')">物料需求表</button>
  </div>
<!--
    <div class="table-container">
    <table class="custom-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>直升机编号</th>
          <th>产线</th>
          <th>机型</th>
          <th>批次</th>
          <th>开始装配时间</th>
          <th>指令交付节点</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in currentData" :key="item.field1">
          <td>{{ index+1+(currentPage-1)*itemsPerPage }}</td>
          <td>{{ item.field1 }}</td>
          <td>{{ item.field2 }}</td>
          <td>{{ item.field3 }}</td>
          <td>{{ item.field4 }}</td>
          <td>{{ item.field5 }}</td>
          <td>{{ item.field6 }}</td>
        </tr>
      </tbody>
    </table>
    <div>
    <div class="button-container">
      <button class="circle-button" :class="{ active: currentTab === 'tab1' }" @click="currentTab = 'tab1'">
        <span v-if="currentTab !== 'tab1'">Tab 1</span>
        <span v-else>✔</span>
      </button>
      <button class="circle-button" :class="{ active: currentTab === 'tab2' }" @click="currentTab = 'tab2'">
        <span v-if="currentTab !== 'tab2'">Tab 2</span>
        <span v-else>✔</span>
      </button>
    </div>
    
    <div class="content-container">
      <div v-if="currentTab === 'tab1'" class="tab-content">
       
        <h2>Tab 1 Content</h2>
        <p>This is the content of Tab 1.</p>
      </div>
      <div v-if="currentTab === 'tab2'" class="tab-content">
     
        <h2>Tab 2 Content</h2>
        <p>This is the content of Tab 2.</p>
      </div>
    </div>
  </div>
    </div>
  -->
  <div class="table-container">
    <table class="custom-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>工号</th>
          <th>姓名</th>
          <th>技能等级</th>
          <th>所在岗位</th>
          <th>所在工位</th>
          <th>所在站位</th>
          <th>所在产线</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in displayedData3" :key="item.field1">
          <td>{{ index+1+(currentPage3-1)*itemsPerPage }}</td>
          <td>{{ item.field1 }}</td>
          <td>{{ item.field2 }}</td>
          <td>{{ item.field3 }}</td>
          <td>{{ item.field4 }}</td>
          <td>{{ item.field5 }}</td>
          <td>{{ item.field6 }}</td>
          <td>{{ item.field7 }}</td>
        </tr>
      </tbody>
    </table>
    </div>

    <div class="pagination1">
      <button @click="firstPage3">首页</button>
      <button @click="prevPage3" :disabled="currentPage3 === 1">上一页</button>
      <span>{{ currentPage3 }}/{{ totalPages3 }}</span>
      <button @click="nextPage3" :disabled="currentPage3 === totalPages3">下一页</button>
      <button @click="lastPage3">尾页</button>
    </div>
  
    </div>

<!--物料需求表-->
<div v-if="activeContent === 'content7'">
              <p>当前位置：生产计划管理--计划查询--整体计划查询--物料需求表</p>
    <div class="pagination1">
      <input type="text" v-model="searchKeyword" placeholder="输入关键词搜索">
      <button @click="search">搜索</button>
      <button @click="fetchData">加载数据库内容</button>
        <button @click="exportToExcel">导出为Excel</button>

    </div>
    
    <div>
      <br>
    <button @click="showContent('content1')">产线生产计划</button>
    <button @click="showContent('content5')">站位生产计划</button>
    <button @click="showContent('content6')">人员生产计划</button>
    <button @click="showContent('content7')">物料需求表</button>
  </div>

  <div class="table-container">
    <table class="custom-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>物料名称</th>
          <th>物料编号</th>
          <th>计划所需时间</th>
          <th>最晚送达时间</th>
          <th>生产单位</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in displayedData4" :key="item.field1">
          <td>{{ index+1+(currentPage4-1)*itemsPerPage }}</td>
          <td>{{ item.field1 }}</td>
          <td>{{ item.field2 }}</td>
          <td>{{ item.field3 }}</td>
          <td>{{ item.field4 }}</td>
          <td>{{ item.field5 }}</td>
        </tr>
      </tbody>
    </table>
    </div>


    <div class="pagination1">
      
      <button @click="firstPage4">首页</button>
      <button @click="prevPage4" :disabled="currentPage4 === 1">上一页</button>
      <span>{{ currentPage4 }}/{{ totalPages4 }}</span>
      <button @click="nextPage4" :disabled="currentPag4 === totalPages4">下一页</button>
      <button @click="lastPage4">尾页</button>
    </div>
    </div>

<!-- 站位计划 -->

      <div v-else-if="activeContent === 'content2'">
               <p>当前位置：生产计划管理--计划查询--站位计划产看</p>
    <div class="pagination1">
      <input type="text" v-model="searchKeyword" placeholder="输入关键词搜索">
      <button @click="search">搜索</button>
      <button @click="fetchData">加载数据库内容</button>
        <button @click="exportToExcel">导出为Excel</button>

    </div>
    <div class="table-container">
    <table class="custom-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>组部件编号</th>
          <th>组部件名称</th>
          <th>站位</th>
          <th>工位</th>
          <th>批次</th>
          <th>开始装配时间</th>
          <th>指令交付节点</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in displayedData" :key="item.field1">
          <td>{{ index+1+(currentPage-1)*itemsPerPage }}</td>
          <td>{{ item.field1 }}</td>
          <td>{{ item.field2 }}</td>
          <td>{{ item.field3 }}</td>
          <td>{{ item.field4 }}</td>
          <td>{{ item.field5 }}</td>
          <td>{{ item.field6 }}</td>
          <td>{{ item.field7 }}</td>
        </tr>
      </tbody>
    </table>
    </div>

    <div class="pagination1">
      <button @click="firstPage">首页</button>
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <span>{{ currentPage }}/{{ totalPages }}</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
      <button @click="lastPage">尾页</button>
    </div>
    </div>

<!-- 统计信息 --整机查看-->

    <div v-if="activeContent === 'content3'">
              <p>当前位置：生产计划管理--计划查询--统计信息查看--整机查看</p>
    <div class="pagination1">
      <input type="text" v-model="searchKeyword" placeholder="输入关键词搜索">
      <button @click="search">搜索</button>
      <button @click="fetchData">加载数据库内容</button>
        <button @click="exportToExcel">导出为Excel</button>

    </div>
    <div class="table-container">
    <table class="custom-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>机型</th>
          <th>军种</th>
          <th>产线</th>
          <th>开始装配批次</th>
          <th>完成装配批次</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in displayedData1" :key="item.field1">
          <td>{{ index+1+(currentPage-1)*itemsPerPage }}</td>
          <td>{{ item.field1 }}</td>
          <td>{{ item.field2 }}</td>
          <td>{{ item.field3 }}</td>
          <td>{{ item.field4 }}</td>
          <td>{{ item.field5 }}</td>
        </tr>
      </tbody>
    </table>
    </div>
    <div class="pagination">

<button @click="showContent('content3')">整机查看</button>
<button @click="showContent('content4')">站位查看</button>
</div>
    <div class="pagination1">
     
      <button @click="firstPage1">首页</button>
      <button @click="prevPage1" :disabled="currentPage1 === 1">上一页</button>
      <span>{{ currentPage1 }}/{{ totalPages1 }}</span>
      <button @click="nextPage1" :disabled="currentPag1 === totalPages1">下一页</button>
      <button @click="lastPage1">尾页</button>
    </div>
    </div>

<!--站位查看-->

    <div v-if="activeContent === 'content4'">
              <p>当前位置：生产计划管理--计划查询--统计信息查看--站位查看</p>
    <div class="pagination1">
      <input type="text" v-model="searchKeyword" placeholder="输入关键词搜索">
      <button @click="search">搜索</button>
      <button @click="fetchData">加载数据库内容</button>
        <button @click="exportToExcel">导出为Excel</button>

    </div>
    <div class="table-container">
    <table class="custom-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>站位名称</th>
          <th>站位编号</th>
          <th>开始装配批次</th>
          <th>完成装配批次</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(item, index) in displayedData2" :key="item.field1">
          <td>{{ index+1+(currentPage2-1)*itemsPerPage }}</td>
          <td>{{ item.field1 }}</td>
          <td>{{ item.field2 }}</td>
          <td>{{ item.field3 }}</td>
          <td>{{ item.field4 }}</td>
        </tr>
      </tbody>
    </table>
    </div>

   <div class="pagination">

    <button @click="showContent('content3')">整机查看</button>
    <button @click="showContent('content4')">站位查看</button>
   </div>
    
      <div class="pagination1">
      <button  @click="firstPage2">首页</button>
      <button @click="prevPage2" :disabled="currentPage2 === 1">上一页</button>
      <span>{{ currentPage2 }}/{{ totalPages2 }}</span>
      <button @click="nextPage2" :disabled="currentPage2 === totalPages2">下一页</button>
      <button @click="lastPage2">尾页</button>
    </div>
    </div>

      </div>

    
      
</template>


<!-- 数据-->


<script>
import axios from 'axios';
import * as XLSX from 'xlsx';
export default {
  data() {
    return {
      tableData : [],
        activeContent:'',
      items:[],//从数据库中获得的数据
      currentData:[/*当前页面的数据*/],
      currentData1:[],
      currentData2:[],
      currentData3:[],
      currentData4:[],
      data: [/* 初始数据 */],
      currentPage: 1,
      currentPage1: 1,
      currentPage2: 1,
      currentPage3: 1,
      currentPage4: 1,
      currentPage5:1,
      itemsPerPage: 10,
      // src:"/A.jpg",
      // src1:"/B.jpg",
      // src2:"/C.jpg",
      src: require('@/assets/A.jpg'), // 更新路径
      src1: require('@/assets/B.jpg'), // 更新路径
      src2: require('@/assets/C.jpg'), // 更新路径

      searchKeyword: '',
      pageSize: 10, // 每页显示条数

      
     

    
    };
  },

  computed: {
       displayedData() {
      const startIndex = (this.currentPage - 1) * this.pageSize;
      return this.currentData.slice(startIndex, startIndex + this.pageSize);
    },
      displayedData1() {
      const startIndex = (this.currentPage1 - 1) * this.pageSize;
      return this.currentData1.slice(startIndex, startIndex + this.pageSize);
    },
      displayedData2() {
      const startIndex = (this.currentPage2 - 1) * this.pageSize;
      return this.currentData2.slice(startIndex, startIndex + this.pageSize);
    },
    displayedData3() {
      const startIndex = (this.currentPage3 - 1) * this.pageSize;
      return this.currentData3.slice(startIndex, startIndex + this.pageSize);
    },
    displayedData4() {
      const startIndex = (this.currentPage4 - 1) * this.pageSize;
      return this.currentData4.slice(startIndex, startIndex + this.pageSize);
    },
    select() {
      // 根据 this.imageNumber 的值返回不同的图片路径
      if (this.currentPage5 === 1) {
        return require('./A.jpg');
      } else if (this.currentPage5 === 2) {
        return require('./B.jpg');
      } else {
        return require('./C.jpg'); // 可以设置默认图片路径
      }
    },
filteredData() {
  let maximum;
  if (!this.searchKeyword) {
    return this.data;
  }
if(this.activeContent ==='content1'){
  maximum = 6;
}else if (this.activeContent==='content2'){
  maximum = 7;
}
  return this.data.filter(item => {
    for (let i = 1; i <= maximum; i++) {
      const field = item[`field${i}`];
      if (typeof field === 'string' && field.includes(this.searchKeyword)) {
        return true;
      } else if (typeof field === 'number' && field.toString().includes(this.searchKeyword)) {
        return true;
      }
    }
    return false;
  });
},
    totalItems() {
      return this.currentData.length;
    },
    totalItems1() {
      return this.currentData1.length;
    },
    totalItems2() {
      return this.currentData2.length;
    },
    totalItems3() {
      return this.currentData3.length;
    },
    totalItems4() {
      return this.currentData4.length;
    },
    totalPages() {
      return Math.ceil(this.totalItems / this.pageSize);
    },
    totalPages1() {
      return Math.ceil(this.totalItems1 / this.pageSize);
    },
    totalPages2() {
      return Math.ceil(this.totalItems2 / this.pageSize);
    },
    totalPages3() {
      return Math.ceil(this.totalItems3 / this.pageSize);
    },
    totalPages4() {
      return Math.ceil(this.totalItems4 / this.pageSize);
    }
  },
  methods: {
    exportToExcel() {
      const data = this.data;
      const adjustedData = data.map(obj => Object.values(obj));
      const worksheet = XLSX.utils.aoa_to_sheet(adjustedData);
      const workbook = XLSX.utils.book_new();
      XLSX.utils.book_append_sheet(workbook, worksheet, 'Sheet1');

      const excelBuffer = XLSX.write(workbook, { bookType: 'xlsx', type: 'array' });
      const blob = new Blob([excelBuffer], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      const url = URL.createObjectURL(blob);

      const link = document.createElement('a');
      link.href = url;
      link.setAttribute('download', 'exported_data.xlsx');
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
          showContent(content) {
      this.activeContent = content;
      this.data = []
      this.fetchData()
    },
     async fetchData() {
      try {
       this.data = []
       let response
        // 发送请求获取数据
        if(this.activeContent === 'content1'){
        response = await axios.get('http://localhost:8000/api/plan/query1');
                   // 判断是否成功获取了数据
    if (response) {
      // 将获取的数据存储在组件中
      this.items = response.data;
       // 遍历 items 中的每个对象，将数据更新到 data 中
       
      this.items.forEach(item => {
        const newDataObject = {};
        newDataObject['field1'] = item.helicopter_number;//直升机编号
        newDataObject['field2'] = item.line;//产线
        newDataObject['field3'] = item.model;//机型
        newDataObject['field4'] = item.batch;//批次
        newDataObject['field5'] = item.start_date;//开始装配时间
        newDataObject['field6'] = item.delivery_date;//指令交付节点

        this.data.push(newDataObject);
        this.currentData = this.getCurrentPageData(this.data, this.currentPage, this.itemsPerPage)
        },

      );
    } else {
      console.error('Failed to fetch data.');
      alert('Failed to fetch data.');
    }
         }else if(this.activeContent === 'content2'){
          response = await axios.get('http://localhost:8000/api/plan/query2');
                     // 判断是否成功获取了数据
    if (response) {
      // 将获取的数据存储在组件中
      this.items = response.data;
      console.log('Data fetched successfully:', this.items);
       // 遍历 items 中的每个对象，将数据更新到 data 中
       
      this.items.forEach(item => {
        const newDataObject = {};
        newDataObject['field1'] = item.module_number;//组部件编号
        newDataObject['field2'] = item.module_name;//组部件名称
        newDataObject['field3'] = item.position_zw;//站位
        newDataObject['field4'] = item.position;//工位
        newDataObject['field5'] = item.batch;//批次
        newDataObject['field6'] = item.start_date;//开始装配时间
        newDataObject['field7'] = item.delivery_date;//指令交付节点

        this.data.push(newDataObject);
        this.currentData = this.getCurrentPageData(this.data, this.currentPage, this.itemsPerPage)
        },

      );
    } else {
      console.error('Failed to fetch data.');
      alert('Failed to fetch data.');
    }
         }
 
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    },
    seclet(){
        if(this.currentPage5===1){this.src1}
        if(this.currentPage5===2){this.src2}
        if(this.currentPage5===3){this.src}
    },
    firstPage() {
      this.currentPage = 1;
     
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;}
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    lastPage() {
      this.currentPage = this.totalPages;
    },
    firstPage1() {
      this.currentPage1 = 1;
     
    },
    prevPage1() {
      if (this.currentPage1 > 1) {
        this.currentPage1--;}
    },
    nextPage1() {
      if (this.currentPage1 < this.totalPages1) {
        this.currentPage1++;
      }
    },
    lastPage1() {
      this.currentPage1 = this.totalPages1;
    }, firstPage2() {
      this.currentPage2 = 1;
     
    },
    prevPage2() {
      if (this.currentPage2 > 1) {
        this.currentPage2--;}
    },
    nextPage2() {
      if (this.currentPage2 < this.totalPages2) {
        this.currentPage2++;
      }
    },
    lastPage2() {
      this.currentPage2 = this.totalPages2;
    },
    firstPage3() {
      this.currentPage3 = 1;
     
    },
    prevPage3() {
      if (this.currentPage3 > 1) {
        this.currentPage3--;}
    },
    nextPage3() {
      if (this.currentPage3 < this.totalPages3) {
        this.currentPage3++;
      }
    },
    lastPage3() {
      this.currentPage3 = this.totalPages3;
    },
    firstPage4() {
      this.currentPage4 = 1;
     
    },
    prevPage4() {
      if (this.currentPage4 > 1) {
        this.currentPage4--;}
    },
    nextPage4() {
      if (this.currentPage4 < this.totalPages4) {
        this.currentPage4++;
      }
    },
    lastPage4() {
      this.currentPage4 = this.totalPages4;
    },
    prevPage5() {
      if (this.currentPage5 > 1) {
        this.currentPage5--;}
    },
    nextPage5() {
      if (this.currentPage5 < 3) {
        this.currentPage5++;
      }
    },
    search() {
      console.log(this.filteredData)
     this.currentData = this.getCurrentPageData(this.filteredData, this.currentPage, this.itemsPerPage)
      // 执行搜索
    },

  getCurrentPageData(data, currentPage, itemsPerPage) {
    const startIndex = (currentPage - 1) * itemsPerPage;
    const endIndex = startIndex + itemsPerPage;
    return data.slice(startIndex, endIndex);
},

  }
};
</script>

<style>
.table-container {
  text-align: center;
  margin: auto;
 
}

.custom-table {
  border-collapse: collapse;
  width: 80%;
  margin-bottom: 20px;
}

.custom-table th,
.custom-table td {
  border: 1px solid black;
  padding: 8px;
}

.pagination {
  margin-top: 20px;
 
}

.pagination button {
  margin-right: 5px;
}
.center-text {  
  text-align: center;  
}  
.pagination1 {
  margin-top: 20px;
  justify-content: flex-end; /* 让子元素居右 */  
}

.pagination1 button {
  margin-right: 5px;
}
.pagination2 {
  position: relative; /* 设置为相对定位，作为绝对定位元素的参考点 */  
  width: 300px; /* 设置容器的宽度 */  
  height: 200px; /* 设置容器的高度 */  
 
}

/* .pagination2 button {

} */
</style>
